<!--交付物表格 -->
<template>
  <div class="taskTable">
    <a-table
      :row-selection="rowSelection"
      :pagination="pagination"
      :loading="loadVisible"
      :columns="tableColumns"
      :data-source="tableData"
      :customRow="rowHover"
      :rowKey="(record) => record['deliverable.oid']"
    >
      <!--      交付物要求-->
      <template slot="deliverableName" slot-scope="text, record">
        <a-tooltip>
          <template slot="title">
            {{ text }}
          </template>
          <a class="" @click="routerRequireDel(record)">{{ text }}</a>
        </a-tooltip>
      </template>
      <!--      交付物-->
      <template slot="subjectName" slot-scope="text, record">
        <div class="deliverable_div">
          <a-tooltip v-if="text">
            <template slot="title">
              {{ text }}
            </template>
            <a class="" style="margin-right: 5px;" @click="routerSubmitDel(record)">{{ text }}</a>
          </a-tooltip>
          <img src="@/assets/todo/eye.png" style="width: 16px;height: 14px;cursor: pointer;"
               v-if="showEye==record" @click="routerSubmitDel"/>
          <img v-else src="@/assets/todo/kongbai.png" style="width: 16px;height: 14px"/>
          <a-button type="primary" v-else @click="openUploadModal(record)">上传</a-button>
        </div>
        <upload-delivery :upload-modal-visible="uploadVisible" @closeUploadModal='closeUploadModal'></upload-delivery>
      </template>
      <!--     交付物-->
      <template slot="subjectNameNoUp" slot-scope="text, record">
        <div class="deliverable_div">
          <a-tooltip v-if="text">
            <template slot="title">
              {{ text }}
            </template>
            <a class="" style="margin-right: 5px"
               @click="routerSubmitDel(record)">{{ text }} </a>
          </a-tooltip>
          <img src="@/assets/todo/eye.png" style="width: 16px;height: 14px;cursor: pointer;"
               v-if="showEye==record && text" @click="routerSubmitDel(record)"/>
          <img v-else src="@/assets/todo/kongbai.png" style="width: 16px;height: 14px"/>
        </div>
      </template>
    </a-table>
  </div>
</template>
<script>
import uploadDelivery from '@/components/uploadDelivery/index'
export default {
  name: "taskTable",
  data() {
    return {
      selectedRowKeys: [],
      headers: {},
      uploadVisible: false,//上传交付物弹框
      showEye: {},//显示交付物后的小眼睛
    };
  },
  components: {
    uploadDelivery,
  },
  props: {
    tableName: {
      type: String,
      default: '执行任务'
    },//表格名称
    columns: {
      type: Array,
      default: () => []
    },//表格头
    tableData: {
      type: Array,
      default: () => []
    },//表格数据
    loadVisible: {
      type: Boolean,
      default: false
    },/*表格数据加载loading显示隐藏*/
    pagination: {
      type: Object,
      defalut: {
        pageSize: 3,
      },
    },
    tableColumns: {
      type: Array,
      default: () => [
        {
          title: "交付物要求",
          dataIndex: "deliverable.name",
          width: '22%',
          // ellipsis: true,
          scopedSlots: {customRender: "deliverableName"}
        },
        {
          title: "交付物",
          dataIndex: "subject.name",
          width: '40%',
          // ellipsis: true,
          scopedSlots: {customRender: "subjectName"}
        },
        {
          title: "是否最新版本",
          width: '19%',
          dataIndex: "deliverable.lastVersion"
        },
        {
          title: "交付物状态",
          width: '19%',
          dataIndex: "deliverable.targetStatus"
        }
      ]
    },//表格数据
  },
  computed: {
    /*pagination() {
      if (this.data.length > 4) {
        return true;
      } else {
        return false;
      }
    },*/
    rowSelection() {
      if (this.tableName == '待审核任务' || this.tableName == '交付物列表') {
        return null
      } else {
        return {
          onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
          },
          getCheckboxProps: record => ({
            props: {
              disabled: record.name === 'Disabled User', // Column configuration not to be checked
              name: record.name,
            },
          }),
        };
      }
    },
  },
  methods: {
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    //交付物要求跳转
    routerRequireDel(val) {
      console.log('交付物要求跳转------------跳转至“文件”：', val)
    },
    //交付物预览
    routerSubmitDel(val) {
      console.log('交付物预览------------跳转至“文件”：', val)
      this.$emit("routerSubmitDel", val);
    },
    //打开上传交付物弹窗
    openUploadModal(val) {
      console.log('上传交付物：', val)
      this.uploadVisible = true
    },
    //关闭上传交付物弹窗
    closeUploadModal() {
      this.uploadVisible = false
    },
    //行移入显示小眼睛
    rowHover(record, index) {
      // const _this = this
      return {
        on: {
          mouseenter: (event) => {
            // this.showEye[index] = true
            // this.showEye = _.clone(this.showEye)
            this.showEye = record
          },  // 鼠标移入行
          mouseleave: (event) => {
            // this.showEye[index] = false
            // this.showEye = _.clone(this.showEye)
            this.showEye = {}
          },
        },
      };
    },
  }
};
</script>
<style lang="less" scoped>
/deep/ .ant-table-tbody > tr.ant-table-row-selected td {
  background: #fff;
}
.upload {
  background: #386df3;
  width: 50px;
  height: 26px;
  color: #fff;
  text-align: center;
  line-height: 26px;
  border-radius: 2px;
}
/deep/ .multi-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; // 超出两行则以...形式隐藏
  -webkit-box-orient: vertical;
  cursor: pointer;
}
/deep/ .ant-table-tbody > tr > td {
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  a {
    display: block;
  }
}
/deep/ .ant-table-tbody > tr > td {
  word-wrap: break-word;
  word-break: break-all;
  > span > div, a {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.deliverable_div {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>